<template>
  <div id="app">
    <template v-if="!isShowMultiple && show">
      <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options"/>
    </template>
  </div>
</template>
<script>
  // import VueAliplayerV2 from '../packages';
  export default {
    // components:{ VueAliplayerV2 },
    data(){
      return {
        options: {
          height: '80%',
          width: '70%',
          // source:'//player.alicdn.com/video/aliyunmedia.mp4',
          isLive: !true,   //切换为直播流的时候必填
          // skinLayout: [
          //   {
          //     'name': 'bigPlayButton',
          //     'align': 'blabs',
          //     'x': 30,
          //     'y': 80
          //   },
          //   {
          //     'name': 'infoDisplay'
          //   },
          //   {
          //     'name': 'controlBar',
          //     'align': 'blabs',
          //     'x': 0,
          //     'y': 0,
          //     'children': [
          //       {
          //         'name': 'liveDisplay',
          //         'align': 'tlabs',
          //         'x': 15,
          //         'y': 6
          //       },
          //       {
          //         'name': 'fullScreenButton',
          //         'align': 'tr',
          //         'x': 10,
          //         'y': 10
          //       },
          //       {
          //         'name': 'volume',
          //         'align': 'tr',
          //         'x': 5,
          //         'y': 10
          //       }
          //     ]
          //   }]
          // useFlashPrism: false,    //指定为flash
          // disableSeek: true //禁用进度条的Seek，默认值为false
        },
        //source: '//player.alicdn.com/video/aliyunmedia.mp4',
        source: 'rtmp://192.168.44.136/live/',
        show: true,
        isShowMultiple: false,
      }
    },

    methods:{

      play(){
        this.$refs.VueAliplayerV2.play()
      },

      pause(){
        this.$refs.VueAliplayerV2.pause();
      },

      replay(){
        this.$refs.VueAliplayerV2.replay();
      },

      getCurrentTime(){
        // this.$refs.VueAliplayerV2.getCurrentTime();
        this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
      },

      getStatus(){
        const status =  this.$refs.VueAliplayerV2.getStatus();
        console.log(`getStatus:`, status);
        alert(`getStatus:${status}`);
      },

      showMultiple(){
        this.isShowMultiple = !this.isShowMultiple;
      }
    }
  }
</script>
<style lang="less">
  * {
    margin: 0;
    padding: 0;
  }
  .remove-text{
    text-align: center;
    padding: 20px;
    font-size: 24px;
  }
  .show-multiple{
    display: flex;
    .multiple-player{
      width: calc(100% / 4);
      margin: 20px;
    }
  }
  .player-btns{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    span {
      margin: 0 auto;
      display: inline-block;
      padding: 5px 10px;
      width: 150px;
      height: 40px;
      line-height: 40px;
      border: 1px solid #eee;
      background: #e1e1e1;
      border-radius: 10px;
      text-align: center;
      margin: 5px;
      cursor: pointer;
    }
  }
  .source-box{
    padding: 5px 10px;
    margin-bottom: 10px;
    .source-label{
      margin-right: 20px;
      font-size: 16px;
      display: block;
    }
    #source{
      margin-top: 10px;
    }
    .source-input{
      margin-top: 10px;
      padding: 5px 10px;
      width: 80%;
      border: 1px solid #ccc;
    }
  }
</style>
